<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>用户注册</title>
  <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}" src="js/jquery/jquery-3.3.1.js" ></script>
  <script type="text/javascript" th:src="@{/js/zw.js}" src="js/zw.js" ></script>
<link th:href="@{/css/login.css}" href="css/login.css" rel="stylesheet" type="text/css" media="all"/>
<link rel="stylesheet" th:href="@{/css/cloudstyle.css}" href="css/cloudstyle.css"/>
<!-- layer -->
<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}" media="all"/>
<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  src="plug/layui/layui.js" ></script>
<style type="text/css">
input::-webkit-input-placeholder {
	color:#fff;
}
.div-a{ position:fixed; left:20px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999}  
.div-b{ position:fixed; right:20px; top:20px; background:#F00;padding: 10px;color: #FFF;z-index: 999} 
</style>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

</head>
<body onkeydown="key_down(event.keyCode);">
<div class="sky" style="position:absolute; width:100%; top:0px;height:100%;opacity:0.75;"></div>
<div class="login-form" style="position:relative;">
		<h1><a  href='http://seat.hhit.edu.cn' target='view_window' style='color:#FFF'>江苏海洋大学图书馆抢座系统V3.0</a></h1>
		<a href="/jz">
			<div class="div-a">点我捐助服务器</div>   
		</a>
		<a href="/jz">
			<div class="div-b">点我捐助服务器</div>   
		</a>
		<div class="login-top">
		<form class="layui-form">
			<div class="login-ic">
				<i class="layui-icon layui-icon-username" style="font-size: 30px; color: #fff;"></i>
				<input type="text"  placeholder="学号" id="u"/>
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-password" style="font-size: 30px; color: #fff;"></i>
				<input type="password"  placeholder="密码" id="p" name="p"  />
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-notice" style="font-size: 30px; color: #fff;"></i>
				<input type="text"  placeholder="常用邮箱（开启关闭服务时需要验证）" lay-verify="email" id="e" name="e"  />
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-table" style="font-size: 35px; color: #FFF;"></i>
			      <select lay-filter="zwSelect" lay-verify="required" lay-search id = "zw1" style="width: 400px;height: 38px; margin-left: 4px;color: #000;opacity:0.7;">
			      </select>
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-table" style="font-size: 35px; color: #FFF;"></i>
			      <select  lay-filter="zwSelect" lay-search lay-verify="required" id = "zw2" style="width: 400px;height: 38px; margin-left: 4px;color: #000;opacity:0.7;">
			      </select>
				<div class="clear"> </div>
			</div>
			<div class="login-ic">
				<i class="layui-icon layui-icon-table" style="font-size: 35px; color: #FFF;"></i>
			      <select  lay-filter="zwSelect" lay-search lay-verify="required" id = "zw3" style="width: 400px;height: 38px; margin-left: 4px;color: #000;opacity:0.7;">
			      </select>
				<div class="clear"> </div>
			</div>
			<div class="log-bwn">
				<input type="button"  id="login1" value="提交注册信息" onclick="tijiao()">
			</div>
		</form>
	</div>
</div>
</body>
</html>


<script>

function key_down(num){
	if(num == 13) {
		tijiao();
	}
}

layui.use(['form', 'layedit', 'laydate'], function(){
  var laydate = layui.laydate;
  var form = layui.form;
  
  form.on('select(zwSelect)', function(data){
		$("#login1").removeAttr("disabled");
		$("#login1").css({'background-color':'#ff3366'});
	  	$("#login2").removeAttr("disabled");
	  	$("#login2").css({'background-color':'#ffd400'});
	});

  //自定义验证规则  
  form.verify({  
       phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！']  
        ,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']  
  });  
});


function tijiao(){
	var u = $("#u").val();
	var p = $("#p").val();
	var em = $("#e").val();
	var zw1 = $('#zw1 option:selected').val()+"="+$('#zw1 option:selected').html();
	var zw2 = $('#zw2 option:selected').val()+"="+$('#zw2 option:selected').html();
	var zw3 = $('#zw3 option:selected').val()+"="+$('#zw3 option:selected').html();
	if(em&&u&&p&&zw1!="=-----请直接选择或搜索选择-----"){
		var ip = returnCitySN['cip'];
		var cname = returnCitySN['cname'];
		$.ajax({
			type:"POST",
			async:true,  //默认true,异步
			data:{"ip":ip,"cname":cname,"u":u,"p":p,"zw1":zw1,"zw2":zw2,"zw3":zw3, "em":em},
			dataType:'json',
			timeout:180000,
			url:"/reg",
			beforeSend: function () {
				layer.msg('拼命注册中...', {icon: 16,shade: [0.5, '#f5f5f5'],scrollbar: false,offset: 'auto', time:600000});
            },
			success:function(data){
				layer.alert(data.message, {icon: data.result=="success"?1:2});
		    },
		    error:function() {
		    	layer.alert('请求超时，请稍后重试！', {icon: 2});
		    }
		});
	}else{
		if(zw1=="=-----请直接选择或搜索选择-----"){
			layer.open({
				  title: '错误提示'
				  ,content: '第一个座位为必选项！'
			}); 
		}else if(!u){
			layer.open({
				  title: '错误提示'
				  ,content: '请输入登录学号'
			}); 
		}else if(!p){
			layer.open({
				  title: '错误提示'
				  ,content: '请输入登录密码'
			}); 
		}else if(!em){
			layer.open({
				  title: '错误提示'
				  ,content: '请输入邮箱地址'
			}); 
		}
	}
	$("#login1").attr("disabled","disabled"); 
	$("#login1").css({'background-color':'#708090'});
}

$(function(){
	var zw = getZW();
	$("#zw1").html(zw);
	$("#zw2").html(zw);
	$("#zw3").html(zw);
	
	$('body').on('input propertychange', '.login-ic', function(event) {
        $("#login1").removeAttr("disabled");
    	$("#login1").css({'background-color':'red'});
    });
});
</script>